{% extends "base-left.html" %}
{% load staticfiles %}

{% block css %}
<link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
<link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
<!-- iCheck for checkboxes and radio inputs -->
{% endblock %}

{% block content %}

<!-- Content Header (Page header) -->
<section class="content-header margin-bottom">
  <ol class="breadcrumb">
    <li><a href=""><i class="fa fa-dashboard"></i>办公平台</a></li>
    <li class="active"><a href="{{ menu.parent.parent.url }}">{{ menu.parent.parent.title }}</a></li>
    <li class="active"><a href="{{ menu.url }}">{{ menu.title }}</a></li>
  </ol>
</section>
    <!-- Main content -->
  <section class="content">
     <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnRefresh" class="btn btn-default">
                        <i class="glyphicon glyphicon-repeat"></i>刷新
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnCreate" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>新增
                    </button>
                </div>
            </div>
            <div class="box-body">
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                    <tr valign="middle">
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>ID</th>
                        <th>名称</th>
                        <th>代码</th>
                        <th>url</th>
                        <th>首页显示</th>
                        <th>父菜单</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br> <br>
            </div>
        </div>
     </div>
  </section>

    <!-- /.content -->

{% endblock %}

{% block javascripts %}
  <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
  <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
  <!-- iCheck 1.0.1 -->
  <script type="text/javascript">
	$(function() {
	    $('#SYSTEM-RBAC').addClass('active');
		$('#SYSTEM-RBAC-MENU').addClass('active');

	});
  </script>

    <script type="text/javascript">
var oDataTable=null;
$(function() {
	oDataTable = initTable();
	function initTable() {
		var oTable=$('#dtbList').DataTable($.extend(true,{},
						DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
						{
							ajax : {
								"url":"{% url 'system-rbac:menu-list' %}",
								"data":function ( d ) {
									//d.select=$("#select").val();
								}
						},
						columns : [
								DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
								{
									data : "id",
									width : "5%",
								},
								{
									data : "title",
								},
								{
									data : "code",
								},
                                {
									data : "url",
								},
                                {
									data : "is_top",
								},

                                {
									data : "parent__title",
								},
                                {
									data : "id",
									bSortable : "false",
									render : function(data, type, row, meta) {
										var ret="";
										var ret="<button title='详情-编辑' onclick='doUpdate("
										+ data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
										return ret;
									}
								}
								],
						}));
		return oTable;
	}

	//checkbox全选
    $("#checkAll").on("click", function () {
        if ($(this).prop("checked") === true) {
            $("input[name='checkList']").prop("checked", $(this).prop("checked"));
            $('#example tbody tr').addClass('selected');
        } else {
            $("input[name='checkList']").prop("checked", false);
            $('#example tbody tr').removeClass('selected');
        }
    });


	$("#btnRefresh").click(function(){
		oDataTable.ajax.reload();
	});

	$("#btnCreate").click(function() {
		layer.open({
			type : 2,
			title : '新增',
			shadeClose : false,
			maxmin : true,
			area : [ '800px', '400px' ],
			content : "{% url 'system-rbac:menu-detail' %}",
			end : function() {
				//关闭时做的事情
				oDataTable.ajax.reload();
			}
		});
	});

});

function doUpdate(id){
	layer.open({
		type : 2,
		title : '编辑',
		shadeClose : false,
    	maxmin : true,
		area : [ '800px', '400px' ],
		content : [ "{% url 'system-rbac:menu-detail' %}"+'?id='+id, 'no' ],
        end : function() {
            //关闭时做的事情
            window.location.reload();
        }
	});
}





</script>
{% endblock %}